<template>
	<div>
		<!--PPT内容-->
		<ul class="ppt-box">
			<li v-for="(item,index) in pptContent" v-show="item.type==0 || item.price==0 || pptObj.type==0">
				<img :src="item.pic">
			</li>
		</ul>

		<!--PPT底部数据-->
		<van-row class="ppt-tips" type="flex" justify="space-between">
			<van-col span="8" class="text-left">阅读 {{pptObj.readCount || 0}}</van-col>
			<van-col span="8" class="text-center">下载次数 {{pptObj.downLoadCount || 0}}</van-col>
			<van-col span="8" class="text-right">
				<span @click="sendFlower()">有帮助 <i class="icon icon-flower" :class="{active:pptObj.helpType==1}"></i></span> {{pptObj.helpCount || 0}}
			</van-col>
		</van-row>
		
		<!--底部按钮及弹窗-->
		<footer>
			<button type="button" class="btn btn-info btn-special"
			v-if="!(pptObj.type == 0 || pptObj.price == 0 || pptObj.type == 0)"
			@click="getAllContent()">学习完整PPT</button>
			<van-popup v-model="show" position="bottom">
				<div class="box">
					<div class="close"><img src='img/colse_icon.png' style='width:100%'></div>
					<dl>
						<dt class="ppt-pic"><img :src="pptObj.pic"></dt>
						<dd class="ppt-info">
							<p class="ppt-title">{{pptObj.title}}</p>
							<p class="price">价格：{{pptObj.price/100}}元</p>
						</dd>
					</dl>
					<!--<div>
						<p class="intro">
							此PPT已有{{pptObj.downLoadCount}}人下载,下载后{{pptObj.helpCount}}人表示有帮助
						</p>
					</div>-->
					<div class="top">
						<p>你可以选择支付{{pptObj.price/100}}元立刻学习,<br>也可以邀请2位新朋友一起免费学习,每位新朋友还可以获得18.8维点红包奖励哦!</p>
					</div>
					<div class="btn-box">
						<button class='btn btn-default' type='button'>支付{{pptObj.price/100}}元学习</button>
						<button class='btn btn-primary' type='button'>邀请2位新朋友一起学习</button>
					</div>
				</div>
			</van-popup>
		</footer>

		<!--<input class="study" type="button" value="学习完整PPT">-->

		<!--好友解锁弹窗-->
		<van-popup v-model="showPopup">
			<div class="alert-box">
				<p>{{pptObj.title}}</p>
				<p>以下好友已经帮你解锁！</p>
				<div class="unlock-info">
					<section class="info" v-for="item in accpterList">
						<img :src="item.headUrl" />
						<span class="friend-name">{{item.nickName}}</span>
					</section>
				</div>
				<button type="button" class="btn" @click="know()">我知道了</button>
			</div>
		</van-popup>

	</div>
</template>

<!--<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>-->
<script>
	import { parseQuery } from '@/utils/api-token.js';
	import 'lib-flexible/flexible.js';
	import { request, getaxios } from "@/utils/request";
	import Vue from "vue";
	import {
		Popup,
		Toast,
		Row,
		Col,
		Icon
	} from "vant";
	import Logo from "../../components/logo.vue";
	//	import HeadPic from '@/assets/headPic.png';
	import flower from '@/assets/flower_grey.png';
	Vue.use(Popup).use(Toast).use(Row).use(Col).use(Icon);
	export default {
		components: {
			Logo
		},
		data() {
			return {
				pptContent: [],
				params: {},
				pptObj: {},
				success: false,
				accpterList: null,
				zoomSrc: '',
				showZoom: false,
				timer: null,
				showPopup: false,
				show:true
			}
		},
		computed: {

		},
		mounted() {

		},
		created() {
			this.params = parseQuery(window.location.href);
			this.getContent(this.params["id"]);
		},
		methods: {
			know() {
				this.showPopup = false;
			},
			getContent(id) {
				var _this = this;
				var showButton = 2;
				var popupFlag = 0;
				getaxios(TESTAPI + "/ppt/queryById", {
					"id": id,
					"token": _this.params["token"]
				}).then(function(res) {
					console.log(res)
					if(res.status == "200") {
						_this.pptObj = res.data;
						_this.pptContent = _this.pptObj.subList || [];
						_this.accpterList = _this.pptObj.accpterList;
						_this.showPopup = _this.accpterList != null ? true : false;
						document.title = _this.pptObj.title;
						_this.success = true;
						showButton = _this.pptObj.lockFlag;
						popupFlag = _this.pptObj.popupFlag;
					} else {
						_this.success = false;
						_this.$toast("获取失败");
					}
					_this.toUnlock();
					var urlJson = {
						"name": "showButton",
						"flag": showButton
					};
					getIosVer("app://" + JSON.stringify(urlJson));

					if(popupFlag == 1) {
						var urlJson = {
							"name": "vipCert",
							"certId": _this.params.param["id"],
							"type": 2
						};
						getIosVer("app://" + JSON.stringify(urlJson));
					}
				});
			},
			sendFlower() {
				var _this = this;
				if(_this.pptObj.helpType) {
					_this.$toast('你已经送过花啦！');
					return false;
				}
				getaxios(TESTAPI + "/common/addFlowers", {
					"token": _this.params["token"],
					"commentId": _this.params["id"],
					"type": 5
				}).then(function(res) {
					console.log(res)
					if(res.status == "200") {
						_this.pptObj.helpCount++;
						_this.pptObj.helpType = 1;
						_this.$toast('送花成功');
					} else {
						_this.$toast('送花失败');
					}
				});
			}
		}
	}
</script>


<style lang="less">
	@import url("../../assets/common/common.less");
	body{
		padding-bottom: 50px;
	}
	/*ppt样式*/
	
	.ppt-box {
		width: 92%;
		margin: 0 auto;
		li {
			width: 100%;
			margin-top: 0.4rem;
		}
		img {
			width: 100%;
		}
	}
	
	/*ppt底部数据*/
	
	.ppt-tips {
		width: 88%;
		color: #999;
		font-size: 12Px;
		margin: 0.72rem auto;
		.text-left {
			text-align: left;
		}
		.text-center {
			text-align: center;
		}
		.text-right {
			text-align: right;
		}
		
		.icon {
			display: inline-block;
			width: 12px;
			height: 16px;
			vertical-align: top;
			
			&.icon-flower {
				background: url(../../assets/flower_grey.png) no-repeat;
				background-size: contain;
				&.active {
					background-image: url(../../assets/flower_red.png);
				}
			}
		}
	}
	
	/*好友解锁弹窗*/
	
	.van-popup {
		overflow-y: initial;
	}
	
	.alert-box {
		width: 246px;
		background: #fff;
		margin-top: -40%;
		p {
			font-size: 14px;
			color: #333;
			font-weight: bold;
			text-align: center;
			margin: 0.19rem;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		.unlock-info {
			display: flex;
			justify-content: space-around;
			.info {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-grow: 0;
				flex-shrink: 1;
				width: 50%;
				img {
					width: 40%;
					margin: 0.16rem;
					border-radius: 50%;
				}
				.friend-name {
					width: 60%;
					margin-bottom: 0.24rem;
					color: #666;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					text-align: center;
				}
			}
		}
		.btn {
			background-color: #ff8400;
			width: 100%;
			border: none;
			color: #fff;
			font-size: 14px;
			height: 25px;
			text-align: center;
		}
	}
	
	
	footer .btn-special{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		font-size: 14PX;
	}
</style>